HTML चरण
उपयोगकर्ता इनपुट एकत्र करने के लिए HTML चरण का उपयोग किया जाता है। उपयोगकर्ता इनपुट को अक्सर प्रोसेसिंग के लिए सर्वर पर भेजा जाता है।
उदाहरण
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form><रूप>तत्व
HTML <form> तत्व का उपयोग उपयोगकर्ता इनपुट के लिए HTML फॉर्म बनाने के लिए किया जाता है:
<form>
.
form elements
.
</form><form> तत्व विभिन्न प्रकार के इनपुट तत्वों के लिए एक कंटेनर है, जैसे: टेक्स्ट फ़ील्ड, चेकबॉक्स, रेडियो बटन, सबमिट बटन इत्यादि।
सहायता नोट:
इस अध्याय में सभी विभिन्न कदमव तत्वों को शामिल किया गया है:HTML Form Elements.
<इनपुट> तत्व
HTML <इनपुट> तत्व सबसे अधिक उपयोग किया जाने वाला स्टेप तत्व है।
एक <इनपुट> तत्व को प्रकार विशेषता के आधार पर कई तरीकों से प्रदर्शित किया जा सकता है।
| प्रकार | व्याख्या |
|---|---|
| <input type="text"> | एकल पंक्ति पाठ इनपुट फ़ील्ड प्रदर्शित करता है |
| <input type="radio"> | एक रेडियो बटन दिखाता है (कई विकल्पों में से एक का चयन करने के लिए) |
| <input type="checkbox"> | एक चेक बॉक्स दिखाता है (एकाधिक विकल्पों में से शून्य या अधिक का चयन करने के लिए) |
| <input type="submit"> | सबमिट बटन दिखाता है (फ़ॉर्म सबमिट करने के लिए) |
| <input type="button"> | एक क्लिक करने योग्य बटन प्रदर्शित करता है |
महत्वपूर्ण:
इस अध्याय में सभी विभिन्न इनपुट प्रकार शामिल हैं:HTML Input Types.
पाठ फ़ील्ड
<इनपुट प्रकार = "टेक्स्ट"> टेक्स्ट इनपुट के लिए सिंगल लाइन इनपुट फ़ील्ड को परिभाषित करता है।
उदाहरण
पाठ के लिए इनपुट फ़ील्ड के साथ चरण:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>नोट:
चरण स्वयं अज्ञात है. साथ ही, ध्यान दें कि इनपुट फ़ील्ड की डिफ़ॉल्ट चौड़ाई 20 अक्षर है।
<लेबल> तत्व
उपरोक्त उदाहरण में <label> तत्व के उपयोग पर ध्यान दें।
<लेबल> टैग मल्टी-स्टेप तत्व के लिए एक लेबल को परिभाषित करता है।
<लेबल> तत्व स्क्रीन रीडर उपयोगकर्ताओं के लिए उपयोगी है क्योंकि जब उपयोगकर्ता इनपुट तत्व पर ध्यान केंद्रित करता है तो स्क्रीन रीडर लेबल को जोर से पढ़ता है।
लाभ:
<लेबल> तत्व उन उपयोगकर्ताओं की भी मदद करता है जिन्हें बहुत छोटे हिस्सों (जैसे रेडियो बटन या चेकबॉक्स) पर क्लिक करने में परेशानी होती है - क्योंकि जब उपयोगकर्ता <लेबल> तत्व के अंदर टेक्स्ट पर क्लिक करता है, तो यह रेडियो बटन/चेकबॉक्स को बदल देता है।
उन्हें एक साथ जोड़ने के लिए <लेबल> टैग की विशेषता <इनपुट> तत्व की आईडी विशेषता के बराबर होनी चाहिए।
रेडियो के बटन
<इनपुट प्रकार = "रेडियो"> एक रेडियो बटन को परिभाषित करता है।
रेडियो बटन उपयोगकर्ता को सीमित संख्या में विकल्पों में से एक का चयन करने की अनुमति देते हैं।
उदाहरण
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>सत्यापन बक्से
<इनपुट प्रकार = "चेकबॉक्स"> एक चेकबॉक्स को परिभाषित करता है।
चेक बॉक्स उपयोगकर्ता को सीमित संख्या में विकल्पों में से शून्य या अधिक विकल्प चुनने की अनुमति देते हैं।
उदाहरण
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>सबमिट बटन
<इनपुट प्रकार = "सबमिट"> एक्शन-हैंडलर को एक्शन डेटा सबमिट करने के लिए एक बटन को परिभाषित करता है।
स्टेप-हैंडलर आमतौर पर सर्वर पर एक फ़ाइल होती है जिसमें इनपुट डेटा को संसाधित करने के लिए एक स्क्रिप्ट होती है।
एक्शन-हैंडलर एक्शन की एक्शन विशेषता में निर्दिष्ट है।
उदाहरण
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form><इनपुट> के लिए नाम विशेषता
ध्यान दें कि सबमिट करने के लिए प्रत्येक इनपुट फ़ील्ड में एक नाम विशेषता होनी चाहिए।
यदि नाम विशेषता छोड़ दी जाती है, तो इनपुट फ़ील्ड का मान कभी भी पारित नहीं किया जाता है।
उदाहरण
यह उदाहरण "प्रथम नाम" इनपुट फ़ील्ड का मान सबमिट नहीं करता है:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>महत्वपूर्ण निर्देश:
चरण डेटा को सफलतापूर्वक सबमिट करने के लिए सभी इनपुट तत्वों में नाम विशेषता जोड़ना न भूलें।